<template>
	<view class="conatiner">
		<view class="header">
			<view class="head_box">
				<view class="le_title">
					<image src="/static/image/activity_icon.png"></image>
					<view>活动管理</view>
				</view>
				<view class="ri_add" @click="headleNew">
					<image src="/static/image/add_icon.png"></image>
					<view>新建活动</view>
				</view>
			</view>
			<view class="header_tab">
				<view v-for="(item,index) in headerTab" :key="item.id" :class="{'active':item.status}"
					@click="headleCut(index)">{{item.name}}</view>
			</view>
		</view>
		<view class="content">
			<!-- 内容 -->
			<view class="con_box" v-for="(item,index) in  activityList" :key="item.id">
				<view class="status" :style="{background:item.state===0?'#FFBB11':item.state===1?'':'#404040'}">
					{{item.state===0?'未开始':item.state===1?'进行中':'已截止'}}
				</view>
				<view class="con_text">
					<view class="text_head">
						<view class="num">{{item.id}}</view>
						<view class="title">{{item.name}}</view>
					</view>
					<view class="text_bom">
						<view>报名时间：{{item.sign_time}}</view>
						<view>报名人数：{{item.sign_count}} 人</view>
					</view>
				</view>
				<view class="status_box">
					<view>
						<view @click="headleApply(item.id)" v-if="!item.state==0">报名数据</view>
						<view style="color:rgba(0, 0, 0, 0.35);" v-else>报名数据</view>
					</view>
					<view>
						<view v-if="item.state>1" @click="headleVote(item.id)">投票通知</view>
						<view style="color:rgba(0, 0, 0, 0.35);" v-else>投票通知</view>
					</view>
					<view class="alter" @click="headlenavNew(item.id)">修改详情</view>
					<view @click="headleSold(item.id,item.is_off,index)"
						:style="{color:!item.is_off?'':'rgba(0, 0, 0, 0.35)'}">{{item.is_off?'已下架':'下架'}}</view>
				</view>
			</view>
		</view>


		<!-- 报名数据底部弹窗 -->
		<view class="derive" :class="{'derive_active':deriveShow}" catchtouchmove='Show'>
			<view class="one" @click="headleClose">
				<image src="/static/image/cuo.png"></image>
			</view>
			<view class="two">
				<image src="/static/image/xiazai.png"></image>
				<view>导出报名数据</view>
			</view>
			<view class="three">移动端：点击链接一键复制，到浏览器打开即可自动下载</view>

			<!-- #ifdef MP-WEIXIN -->
			<!-- 复制链接 -->
			<view class="four" @click="copy(link)">
				{{link}}
			</view>
			<image src="/static/image/or.png" class="five"></image>
			<!-- 下载 -->
			<view class="six">PC端直接下载</view>
			<!-- #endif -->


			<!-- #ifdef H5 -->
			<!-- 复制链接 -->
			<view class="four" @click="copyBtn(link)">
				{{link}}
			</view>
			<image src="/static/image/or.png" class="five"></image>
			<!-- 下载 -->
			<a :href="link" class="six">PC端直接下载</a>
			<!-- #endif -->

		</view>

		<!-- 投票通知底部弹窗 -->
		<view class="vote" :class="{'vote_active': voteShow}">
			<view class="one" @click="headleClose">
				<image src="/static/image/cuo.png"></image>
			</view>
			<view class="two">
				<image src="/static/image/shangchan.png"></image>
				<view>上传投票链接文件</view>
			</view>
			<view class="three" v-if="!fileLink">
				<view class="thr_con" @click="headleUpFile">
					<image src="/static/image/shang.png"></image>
					<view>上传文件</view>
				</view>
			</view>
			<view class="three" v-else>
				<view class="header_file">
					<image src="/static/image/file.png"></image>
					<view>{{fileLink}}</view>
				</view>
				<view class="fool_reset">
					<view @click="headleEmpty">删除文件</view>
					<view @click="headleUpFile">重新上传</view>
				</view>
			</view>
			<view class="four">
				<image src="/static/image/fasong.png"></image>
				<view>发送订阅消息</view>
			</view>
			<view @click="headleDblclick"
				:class="{'blue':state===0 && fileLink,'yellow':state===1 && fileLink,'green':state===2 && fileLink}"
				class="five">{{state===0 && fileLink?'双击发送':resultbtn}}</view>
		</view>
		<!-- 遮罩层 -->
		<view class="mask" @click="headleClose" v-if="deriveShow || voteShow" catchtouchmove='ture'></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 头部选项卡
				headerTab: [{
						id: 0,
						name: '全部',
						status: true
					},
					{
						id: 1,
						name: '进行中',
						status: false
					},
					{
						id: 2,
						name: '未开始',
						status: false
					},
					{
						id: 3,
						name: '已截止',
						status: false
					},

				],
				deriveShow: false, //控制报名数据弹窗显示或隐藏
				voteShow: false, //控制投票通知弹窗显示或隐藏
				activityList: [], //活动数据列表
				ActivityPageNum: 1, //获取活动列表页码值
				Num: 0, //控制获取的数据
				nextPage: null, //控制是否有下一页数据
				link: '', //保存下载链接
				fileLink: '', //投票通知链接
				resultbtn: null, //投票通知按钮提示
				state: null, //投票通知状态
				tagId: null, //当前活动id
				Time: 0
			}
		},
		onLoad() {
			// this.getActivityList()

		},
		methods: {
			// 头部选项卡回调
			headleCut(index) {
				this.headerTab.map((item, i) => i === index ? item.status = true : item.status = false)
				this.Num = index
				this.activityList = []
				this.ActivityPageNum = 1
				this.getActivityList()
			},

			//控制报名数据部弹窗回调
			headleApply(id) {
				this.deriveShow = true
				this.myRequesy({
					url: 'admin/export-regis',
					data: {
						tag_id: id
					}
				}).then(res => {
					if (res.data.code === 0) {
						this.link = res.data.data.url
					}
				})
			},
			// 关闭报名数据底部弹窗
			headleClose() {
				this.deriveShow = false
				this.voteShow = false
			},
			// #ifdef MP-WEIXIN
			//报名数据复制回调
			copy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '快去下载吧！'
						})
					}
				});
			},
			// #endif

			// H5复制链接
			// #ifdef H5
			copyBtn(info) {
				let result
				let textarea = document.createElement("textarea")
				textarea.value = info
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选中文本内容
				textarea.setSelectionRange(0, info.length) // 设置选定区的开始和结束点
				uni.showToast({ //提示
					title: '复制成功'
				})
				result = document.execCommand("copy") //将当前选中区复制到剪贴板
				textarea.remove()
			},
			// #endif

			//控制投票通知底部弹窗回调
			headleVote(id) {
				this.tagId = id
				this.voteShow = true
				this.getVoteMessage()
			},
			// 获取投票通知信息
			getVoteMessage() {
				this.myRequesy({
					url: 'admin/vote-notice-info',
					data: {
						tag_id: this.tagId
					}
				}).then(res => {
					if (res.data.code === 0) {
						this.fileLink = res.data.data.excel,
							this.resultbtn = res.data.data.result,
							this.state = res.data.data.state
					}
				})
			},
			//投票通知 上传文件
			headleUpFile() {
				if (this.state === 0) {
					let that = this
					// #ifdef MP-WEIXIN
					wx.chooseMessageFile({
						count: 1,
						type: 'file',
						extension: ['.xls', 'xlsx'],
						success(res) {
							wx.showLoading({
								title: "文件上传中...",
								mask: true
							})
							let filename = res.tempFiles[0].path
							let fileNames = filename.lastIndexOf("."); //取到文件名开始到最后一个点的长度
							let fileNameLength = filename.length; //取到文件名长度
							let fileFormat = filename.substring(fileNames + 1, fileNameLength); //截
							console.log(fileFormat)
							if (fileFormat === 'xls' || fileFormat === 'xlsx') {
								uni.uploadFile({
									url: 'https://lottery.qnsyw.cn/api/admin/upload-excel',
									filePath: filename,
									name: 'excelFile',
									header: {
										'content-type': 'multipart/form-data',
										'Authorization': uni.getStorageSync('token')
									},
									success(res) {
										wx.hideLoading()
										let data = JSON.parse(res.data)
										if (data.code === 0) {
											that.fileLink = data.data.url
										}
									}
								})
							} else {
								wx.hideLoading()
								wx.showToast({
									title: "文件后缀必须是xls或xlsx",
									icon: 'none'
								})

							}

						}
					})
					//#endif


					// #ifdef H5
					uni.chooseFile({
						count: 1,
						type: 'file',
						extension: ['.xls', 'xlsx'],
						success(res) {
							let filename = res.tempFiles[0].path
							uni.showLoading({
								title: "文件上传中...",
								mask: true
							})
							uni.uploadFile({
								url: 'https://lottery.qnsyw.cn/api/admin/upload-excel',
								filePath: filename,
								name: 'excelFile',
								header: {
									'Authorization': uni.getStorageSync('token')
								},
								success(res) {
									wx.hideLoading()
									let data = JSON.parse(res.data)
									if (data.code === 0) {
										that.fileLink = data.data.url
									}
								}
							})
							// console.log(res)
							// let filename = res.tempFiles[0].path
							// let fileNames = filename.lastIndexOf("."); //取到文件名开始到最后一个点的长度
							// console.log(fileNames, "22222222222222222")
							// let fileNameLength = filename.length; //取到文件名长度
							// let fileFormat = filename.substring(fileNames + 1, fileNameLength); //截
							// console.log(fileFormat, "1111111")
							// if (fileFormat === 'xls' || fileFormat === 'xlsx') {
							// 	uni.uploadFile({
							// 		url: 'https://lottery.qnsyw.cn/api/admin/upload-excel',
							// 		filePath: filename,
							// 		name: 'excelFile',
							// 		header: {
							// 			'content-type': 'multipart/form-data',
							// 			'Authorization': uni.getStorageSync('token')
							// 		},
							// 		success(res) {
							// 			let data = JSON.parse(res.data)
							// 			if (data.code === 0) {
							// 				that.fileLink = data.data.url
							// 			}
							// 		}
							// 	})
							// } else {
							// 	wx.showToast({
							// 		title: "文件后缀必须是xls或xlsx",
							// 		icon: 'none'
							// 	})

							// }
						}
					})
					// #endif

				}
			},
			// 删除文件
			headleEmpty() {
				if (this.state === 0) {
					this.fileLink = ''
					return
				}

			},

			// 双击发送投票通知
			headleDblclick(e) {
				if (this.Time === 0) {
					this.Time = new Date().getTime()
				} else {
					if (new Date().getTime() - this.Time <= 700) {
						if (this.state === 0 && this.fileLink) {
							this.myRequesy({
								url: 'admin/send-vote-notice',
								method: 'POST',
								data: {
									tag_id: this.tagId,
									excel: this.fileLink
								}
							}).then(res => {
								if (res.data.code === 0) {
									this.getVoteMessage()
								}
							})
						}
					}
					this.Time = 0
				}

			},

			// 获取活动列表
			getActivityList() {
				this.myRequesy({
					url: this.Num === 0 ? 'admin/all-activities' : this.Num === 1 ? 'admin/start-activities' : this
						.Num === 2 ? 'admin/no-start-activities' : 'admin/end-activities',
					data: {
						page: this.ActivityPageNum
					}
				}).then(res => {
					if (res.data.code === 0 && res.data.data) {
						this.activityList = [...this.activityList, ...res.data.data]
						this.nextPage = res.data.next_url
					}
				})
			},

			// 下架或上架回调
			headleSold(id, status, index) {
				console.log(index)
				this.myRequesy({
					url: status ? 'admin/activity/to-up' : 'admin/activity/to-off',
					method: 'POST',
					data: {
						tag_id: id
					}
				}).then(res => {
					if (res.data.code === 0) {
						this.activityList[index].is_off = !this.activityList[index].is_off
					}
				})
			},

			// 跳转到新建活动页
			headleNew() {
				uni.navigateTo({
					url: '../newactivity/newactivity'
				})
			},
			//跳转到修改活动详情
			headlenavNew(id) {
				uni.navigateTo({
					url: '../newactivity/newactivity?status=1&id=' + id
				})
			},


		},

		onShow() {
			this.ActivityPageNum = 1
			this.activityList = []
			this.getActivityList()

		},
		onReachBottom() {

			if (this.nextPage !== null) {
				this.ActivityPageNum += 1
				this.getActivityList()
			}

		}
	}
</script>

<style>
	page {
		background: #F4F5F5 !important;
	}
</style>
<style lang="scss" scoped>
	.conatiner {
		.header {
			padding: 40upx 30upx 30upx 30upx;
			background-color: #fff;

			.head_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40upx;

				.le_title {
					display: flex;
					justify-content: center;
					align-items: center;
					color: rgba(16, 16, 16, 100);
					font-size: 36upx;
					font-weight: 600;

					image {
						width: 50upx;
						height: 50upx;
						margin-right: 4upx;
					}
				}

				.ri_add {
					display: flex;
					justify-content: center;
					align-items: center;
					color: rgba(85, 119, 252, 100);
					font-size: 28upx;

					image {
						width: 40upx;
						height: 40upx;
						margin-right: 10upx;
					}
				}
			}

			.header_tab {
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					width: 150upx;
					height: 70upx;
					line-height: 70upx;
					border-radius: 100upx;
					background-color: rgba(244, 245, 245, 100);
					color: rgba(0, 0, 0, 0.35);
					font-size: 30upx;
					text-align: center;
					box-shadow: 0px 0px 4upx 0px rgba(244, 245, 245, 100);
					border: 2upx solid rgba(0, 0, 0, 0.05);
					font-weight: 600;
				}

				.active {
					background-color: rgba(85, 119, 252, 100);
					color: rgba(255, 255, 255, 100);
					box-shadow: 0px 0px 4upx 0px rgba(85, 119, 252, 100);
				}
			}

		}

		.content {
			.con_box {
				background-color: #fff;
				padding: 30upx 0upx;
				margin: 20upx 0upx;
				height: 320upx;
				box-sizing: border-box;
				position: relative;

				.status {
					position: absolute;
					right: 30upx;
					top: 0;
					width: 110upx;
					height: 56upx;
					line-height: 56upx;
					border-radius: 0px 0px 12upx 12upx;
					background-color: rgba(85, 119, 252, 100);
					color: rgba(255, 255, 255, 100);
					font-size: 26upx;
					text-align: center;
				}

				.con_text {
					padding: 0upx 30upx 30upx 30upx;
					border-bottom: 2upx solid rgba(244, 245, 245, 100);
					;

					.text_head {
						display: flex;
						align-content: center;
						color: rgba(16, 16, 16, 100);
						font-size: 32upx;
						font-weight: 600;
						margin-bottom: 20upx;

						.num {
							margin-right: 14upx;
						}
					}

					.text_bom {
						color: rgba(0, 0, 0, 0.5);
						font-size: 28upx;
						line-height: 40upx;
						margin-left: 54upx;
					}
				}

				.status_box {
					padding: 30upx 60upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 30upx;
					color: rgba(40, 141, 248, 100);
				}
			}
		}

		.derive {
			display: flex;
			flex-direction: column;
			align-items: center;
			z-index: 100;
			width: 100%;
			height: 0upx;
			border-radius: 40upx 40upx 0upx 0upx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
			transition: 1s;

			.one {
				position: absolute;
				right: 40upx;
				top: 0;
				width: 84upx;
				height: 68upx;
				border-radius: 0px 0px 12upx 12upx;
				background-color: rgba(244, 245, 245, 100);
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 44upx;
					height: 44upx;
				}
			}

			.two {
				display: flex;
				align-items: center;
				color: rgba(85, 119, 252, 100);
				font-size: 36upx;
				font-weight: 600;
				margin-top: 68upx;

				image {
					width: 40upx;
					height: 40upx;
					margin-right: 8upx;
				}
			}

			.three {
				margin: 60upx 0upx 20upx 0upx;
				color: rgba(64, 64, 64, 100);
				font-size: 26upx;
			}

			.four {
				width: 670upx;
				height: 140upx;
				border-radius: 16upx;
				background-color: rgba(251, 251, 251, 100);
				border: 2upx solid rgba(0, 0, 0, 0.05);
				padding: 30upx;
				box-sizing: border-box;
				color: rgba(85, 119, 252, 100);
				font-size: 27upx;
			}

			.five {
				width: 30upx;
				height: 42upx;
				margin: 20upx 0upx;
			}

			.six {
				width: 670upx;
				height: 100upx;
				line-height: 100upx;
				border-radius: 12upx;
				background-color: rgba(85, 119, 252, 100);
				color: rgba(255, 255, 255, 100);
				font-size: 30upx;
				text-align: center;
			}

			/* #ifdef H5 */
			a {
				text-decoration: none;
			}

			/* #endif */
		}

		.derive_active {
			background-color: #fff;
			height: 640upx;
			transition: 1s;
		}


		.vote {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: #fff;
			z-index: 100;
			border-radius: 40upx 40upx 0upx 0upx;
			width: 100%;
			height: 0upx;
			padding: 0upx 40upx;
			box-sizing: border-box;
			transition: 1s;

			.one {
				position: absolute;
				top: 0;
				right: 60upx;
				width: 74upx;
				height: 68upx;
				border-radius: 0px 0px 12upx 12upx;
				background-color: rgba(244, 245, 245, 100);
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 44upx;
					height: 44upx;
				}
			}

			.two {
				margin: 68upx 0upx 30upx 0upx;
				display: flex;
				align-items: center;
				color: rgba(85, 119, 252, 100);
				font-size: 36upx;
				font-weight: 600;

				image {
					width: 40upx;
					height: 40upx;
					margin-right: 8upx;
				}
			}

			.three {
				width: 670upx;
				height: 240upx;
				border-radius: 16upx;
				background-color: rgba(244, 245, 245, 100);
				text-align: center;
				border: 2upx solid rgba(0, 0, 0, 0.05);
				position: relative;

				.thr_con {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					display: flex;
					color: rgba(0, 0, 0, 0.35);
					font-size: 32upx;

					image {
						width: 44upx;
						height: 44upx;
						margin-right: 8upx;
					}
				}

				.header_file {
					display: flex;
					justify-content: center;
					align-items: center;
					color: rgba(85, 119, 252, 100);
					font-size: 32upx;
					margin: 46upx;

					view {
						width: 260upx;
						overflow: hidden;
					}

					image {
						width: 44upx;
						height: 44upx;
						margin-right: 4upx;
					}
				}

				.fool_reset {
					border-top: 2upx solid rgba(0, 0, 0, 0.05);
					;
					padding: 30upx 122upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: rgba(0, 0, 0, 0.5);
					font-size: 28upx;
				}

			}

			.four {
				display: flex;
				align-items: center;
				margin: 60upx 0upx 30upx 0upx;
				color: rgba(85, 119, 252, 100);
				font-size: 36upx;
				font-weight: 600;

				image {
					width: 40upx;
					height: 40upx;
					margin-right: 8upx;
				}
			}

			.five {
				width: 670upx;
				height: 100upx;
				line-height: 100upx;
				border-radius: 12upx;
				background-color: rgba(0, 0, 0, 0.35);
				color: rgba(255, 255, 255, 100);
				font-size: 30upx;
				text-align: center;
			}

			.blue {
				background-color: rgba(85, 119, 252, 100);
				color: rgba(255, 255, 255, 100);
				font-weight: 600;
			}

			.yellow {
				background-color: rgba(255, 187, 17, 100);
				color: rgba(255, 255, 255, 100);
				font-weight: 600;
			}

			.green {
				color: rgba(255, 255, 255, 100);
				background-color: rgba(40, 187, 99, 100);
				font-weight: 600;
			}
		}

		.vote_active {
			height: 720upx;
			transition: 1s;
		}

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 99;
		}
	}
</style>
